<template>
 <div  class='article-container'>
    <el-card  class="box-card">
    <!-- 状态栏 -->
    <div slot="header" class="clearfix">
     <my-breadcrumb> 内容管理 </my-breadcrumb>
</div>
<!-- 表单 -->
<el-form  label-width="80px" :model="form" ref="form">
  <!-- 状态栏 -->
   <MyStatus  v-model='form.status' ></MyStatus>
    <!-- 频道栏 -->
   <!-- 3.使用组件 -->
  <MyChannel  v-model='form.channelId'></MyChannel>
  <!-- 日期 -->
  <el-form-item  label='日期'>
    <el-date-picker
      v-model="form.dateRange"
      type="daterange"
      value-format="yyyy-MM-dd"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    </el-form-item>
    <!-- 查询按钮 -->
    <el-form-item>
        <el-button type="primary" @click='hSearch' >查询</el-button>
    </el-form-item>
  </el-form>
<!-- 表单 -->
    </el-card>
    <!-- 筛选封面栏 -->
 <el-card  class="box-card"  style="margin-top:1em">
   <div  slot="header" class="clearfix">
        根据筛选条件共查询到{{total_count}}条结果，当前页为{{curPage}}页
        </div>
       <el-table
    :data="articles"
    stripe
    style="width: 100%">
    <el-table-column
      label="封面"
       width="180">
   <template   slot-scope="scope">
           <el-image
              style="width: 100px; height: 100px"
              :src='scope.row.cover.images[0]'>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
        </template>
    </el-table-column>
    <el-table-column
      label="标题"
      prop='title'>
    </el-table-column>
    <el-table-column
     prop="status"
      label="状态">
     <template  slot-scope="scope" >
      <el-tag  v-if='scope.row.status===0'> 草稿</el-tag>
      <el-tag  v-else-if='scope.row.status===1'> 待审核</el-tag>
      <el-tag  v-else-if='scope.row.status===2'> 审核成功</el-tag>
      <el-tag  v-else-if='scope.row.status===3'>审核失败 </el-tag>
      <el-tag   v-else-if='scope.row.status===4'> 已删除</el-tag>
        </template >
    </el-table-column>
    <el-table-column
      label="发布时间"
      prop='pubdate'>
    </el-table-column>
    <el-table-column
      label="操作">
      <template  slot-scope="scope">
         <el-row>
            <el-button type="primary" icon="el-icon-edit"  @click="hEdit(scope.$index, scope.row)" circle></el-button>
             <el-button type="danger" icon="el-icon-delete"  @click="hDelete(scope.$index, scope.row)" circle></el-button>
           </el-row>
          </template >
    </el-table-column>
  </el-table>
    <el-pagination
  background
  layout="prev, pager, next"
  :total="total_count"
  :page-size='10'
  @current-change='hPageChange'
  style="margin-top:1em">
</el-pagination>
    </el-card>
  </div>
</template>

<script>
// 1. 导入组件
import MyChannel from '@/components/channel.vue'
import MyStatus from '@/components/status.vue'
import MyBreadcrumb from '@/components/breadcrumb.vue'
export default {
  name: 'ArticleIndex',
  data () {
    return {
      form: {
        // 指时间区间
        dateRange: null,
        // 查询文章的状态
        status: null,
        // 当前用户选中的频道
        channelId: null
      },
      // 表格数据
      articles: [],
      // 定义总页数
      total_count: 0,
      // 当前页 默认第一项
      curPage: 1
    }
  },
  // 2.注册组件
  components: {
    MyChannel,
    MyStatus,
    MyBreadcrumb
  },
  created () {
    this.loadArticles()
  },
  methods: {
    // 子组件熬出change-channel事件时，调用
    hChangeChannel (channelId) {
      console.log('父组件中回调函数执行了....', channelId)
      this.form.channelId = channelId
    },
    getCond () {
      const { dateRange, status, channelId } = this.form
      const query = {
        page: this.curPage,
        status
      }
      // 1.1检查用户是否选择了日期区间
      if (dateRange) {
      // 此时dateRange是一个数组
      // 开始日期
        query.begin_pubdate = dateRange[0]
        // 结束日期
        query.end_pubdate = dateRange[1]
      }
      // 1.2检查用户是否选择了频道
      if (channelId) {
        query.channelId = channelId
      } else {
        query.channelId = null
      }
      return query
    },
    async  loadArticles () {
      // 拼接查询参数
      const query = this.getCond()
      // 2. 发ajax获取数据
      // 1.发送ajax获取数据
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/articles',
        params: query
      })
      // console.log(res)
      // 2.更新当前表格数据
      this.articles = res.data.data.results
      // 3.更新总页数
      this.total_count = res.data.data.total_count
    },
    //  用户点击了分页
    hPageChange (curPage) {
      // alert(curPage)
      // 1.更新当前页码
      this.curPage = curPage
      // 2.重新发送请求
      this.loadArticles()
    },
    hSearch () {
      // 查询
      this.loadArticles()
    },
    hEdit (index, row) {
      console.log(index, row)
    },
    async doDelete (idObj) {
    //   console.log('你要删除的数据ID是', idObj.toString())
      try {
        // 发送ajax请求
        const res = await this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + idObj.toString()
        })
        console.log(res)
        this.$message.success('删除成功')
        // 重新发送请求
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    // 用户点击删除
    hDelete (index, row) {
      console.log(index, row)
      this.$confirm('你确定要删除么？').then(() => {
        this.doDelete(row.id)
      }).catch(() => {
        // 点击取消不用做功能
      })
    }

  }
}
</script>

<style>

</style>
